<template>
    <div class="main">
        <div class="logo">
            <img src="../assets/logo.png" alt="logo" class="w-100">
        </div>
        <img src="../assets/line.png" alt="line" class="w-100">
        <div>
            <div class="name">
                <p class="yearNum">
                    <img src="../assets/logo-bg.png" alt="logo" style="width:200px">
                </p>
                <p class="mydsj">— 我的出差大事记 —</p>
            </div>
            <div class="img-box">
                <img src="../assets/logoimg.png" alt="logo" class="w-100 logoimg">
                <div class="pos_text t0">欢迎您，{{personInfo.userName}}</div>
                <div class="pos_text t1">邀你一起回首</div>
                <div class="pos_text t2">那些难忘的出差故事..</div>
            </div>
            <div>
                <!-- <div>
                        <input v-model="phone" placeholder="请输入手机号" class="input">
                    </div> -->
                <span class="btn" @click="toIndex" style="margin-top:2.4rem;">查看出差大事记</span>
                <div class="tips" style="margin-top:1rem;">您的大事记已被查看 {{personInfo.shareNum}} 次</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                phone: '',
                personInfo: {},
                btnshow: true
            }
        },
        methods: {
            toIndex() {
                // if (this.phone == '') {
                //     alert('请输入手机号')
                //     return false
                // } else if (this.checkMobile(this.phone)) {
                //     alert('手机格式不正确')
                //     return false
                // } else {
                //     this.$router.replace({
                //         path: '/index'
                //     })
                // }
                if(this.btnshow){
                    this.$router.replace({
                        path: '/index/' + this.$route.params.id
                    })
                }else{
                    alert('没有相关数据')
                }
            },
            checkMobile(phone) {
                if (!(/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(phone))) {
                    return true;
                } else {
                    return false
                }
            },
            getBaseInfo() {
                this.$axios('restful/big/event/base/info?randomSignature=' + this.$route.params.id)
                    .then(res => {
                        if (res.data.code == 1) {
                            let obj = res.data.object
                            this.personInfo = obj;
                            document.title = obj.userName  + '，我的出差大事记'
                        } else {
                            this.btnshow = false;
                        }
                    })
            },
        },
        mounted(){
            this.getBaseInfo()
        }
    }
</script>

<style scoped>
    .main {
        text-align: center;
        font-size: 1.4rem;
        background-color: #EDD9B0;
        /* Center slide text vertically */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        background-image: url('../assets/bg.jpg');
        color: #2a2a2a;
        overflow: hidden;
    }
    .logo {
        padding: 1rem;
    }
    .name {
        font-weight: 600;
        background-image: url('../assets/bottomlogo.png');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 90%;
        padding: 1.6rem 0 2.2rem;
    }
    .yearNum>span:nth-child(1) {
        font-size: 4rem;
        color: #C44655;
        font-style: italic;
    }
    .yearNum>span:nth-child(2) {
        font-size: 4rem;
        color: #3D85AD;
        font-style: italic;
    }
    .mydsj {
        margin-top: 0.6rem;
        font-size: 1.4rem;
    }
    .img-box {
        padding: 0 1.4rem;
        position: relative;
    }
    .logoimg {
        box-shadow: 0 0 1px 0.3rem #C44655;
    }
    .pos_text {
        font-size: 1rem;
        font-weight: 600;
        color: #f6f6f6;
        background-color: #3D85AD;
        width: auto;
        display: inline-block;
        line-height: 1.6rem;
        padding: 0 0.8rem;
        border-radius: 0.4rem;
        position: absolute;
        text-align: center;
    }
    .t0 {
        top: 0.8rem;
        left: 5.4rem;
    }
    .t1 {
        top: 3.4rem;
        left: 0.4rem;
    }
    .t2 {
        top: 6.2rem;
        left: 2.4rem;
    }
    .btn {
        font-weight: 600;
        color: #f6f6f6;
        background-color: #3D85AD;
        display: inline-block;
        line-height: 2.4rem;
        padding: 0 0.8rem;
        margin-top: 0.6rem;
        box-shadow: 0.2rem 0.2rem 0.1rem 0.1rem #C44655;
        border-radius: 0.4rem;
        margin-bottom: 1rem;
    }
    .t3 {
        position: absolute;
        bottom: 0.8rem;
        left: 4rem;
        color: #f6f6f6;
        font-size: 0.9rem;
        font-weight: 600;
    }
    .input {
        line-height: 2.2rem;
        margin-top: 2rem;
        width: 14rem;
        text-align: center;
        border-radius: 0.4rem;
        border: solid 2px #C44655;
        font-size: 1rem;
        /* box-shadow: 0rem 0rem 0.1rem 0.1rem #3D85AD; */
    }
    .tips{
        font-size: 0.8rem;
    }
</style>